<template>
  <div class="container">
    <el-card>
    <el-row class="">
      <el-form :inline="true" :label-position="labelPosition">
        <el-col :span="24">
          <el-form-item label="站点选择">
            <el-select v-model="listQuery.stationCode" placeholder="请选择站点" clearable>
              <el-option
                v-for="item in options_station"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="设备选择">
            <el-select v-model="listQuery.deviceCode" placeholder="请选择设备" clearable>
              <el-option
                v-for="item in options_device"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              v-model="listQuery.beginTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">
            查询
          </el-button>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="importList">
            导出
          </el-button>
        </el-col>
      </el-form>
    </el-row>
    </el-card>
    <el-row class="card-panel table">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="序号" prop="id" type="index" width="100px" sortable align="center" :class-name="getSortClass('id')">
        </el-table-column>
        <el-table-column label="日期" prop="date" align="center">
          <template slot-scope="{row}">
            <span>{{ row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="能源站" prop="stationName" >
          <template slot-scope="{row}">
            <span class="link-type">{{ row.stationName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="系统" prop="system" align="center">
          <template slot-scope="{row}">
            <span>{{ row.system }}</span>
          </template>
        </el-table-column>
        <el-table-column label="机组" prop="plantUnit" align="center">
          <template slot-scope="{row}">
            <span>{{ row.plantUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产能(KQW)" prop="capacity" align="center">
          <template slot-scope="{row}">
            <span>{{ row.capacity }}</span>
          </template>
        </el-table-column>
        <el-table-column label="当天累计开机时间(m)" prop="dayAllRunTime" align="center">
          <template slot-scope="{row}">
            <span>{{ row.dayAllRunTime }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </el-row>
  </div>
</template>

<script>
import { list } from '@/api/mochaManage/reportManage/reportProductivity/index'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'OperationLogs',
  components: { Pagination },

  filters: {

  },
  data() {
    return {
      labelPosition: 'right',
      downloadLoading: false,
      // 表格
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      options_station: [{
        value: '1',
        label: '1号能源站'
      }, {
        value: '2',
        label: '2号能源站'
      }, {
        value: '3',
        label: '3号能源站'
      }],
      options_device: [{
        value: 'NY-001',
        label: '冰蓄冷1号机'
      }, {
        value: 'NY-002',
        label: '三联供'
      }, {
        value: 'NY-003',
        label: '地源热泵'
      }],
      rules: {
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      list(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
      })
      setTimeout(() => {
        this.listLoading = false
      }, 1 * 300)
    },
    clearSearch() {
      // this.listQuery.stationCode = ''
      // this.listQuery.deviceCode = ''
    },
    importList() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['序号', '日期"', '能源站', '系统', '机组', '产能(KQW)', '当天累计开机时间(m)']
        const filterVal = ['id', 'date', 'stationName', 'system', 'plantUnit', 'capacity', 'dayAllRunTime']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '产能报表'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    margin: 30px;
    font-size: 30px;
    line-height: 30px;
    .card-panel {
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);
      padding: 20px;
    }
    .search{

    }
    .table{
      margin-top: 10px;
    }
  }
</style>
